<template>
<!-- 用到了 -->

    <div style="padding: 10px" >
    
        <div class="title">
            <h1>{{stitle}}</h1>
        </div>
        <!-- <el-row><h4 style="color:#E6A23C;width:784px;margin:0 auto;text-align:right;">总提交数：{{num}}</h4></el-row> -->
        <el-row><h4 style="color:#E6A23C;width:784px;margin:0 auto;text-align:right;">总提交数：{{num}}</h4></el-row>

        <div >

            <div v-for="(item,index) in res" :key="index" class="infinite-list-item" >
                <!-- <el-card v-if="item.type===3"  style="width:784px;height:350px;margin: 0 auto;">
                    <div style="width:700px;margin:0 auto;font-size:20px;color:#E6A23C;">{{index+1}}、{{item.questionName}}</div>
                    <div class="demo boder" style="text-align:center;">
                        <div class="temp1"></div>
                        <div style="height:210px;">
                            <el-table 
                                :data="item.answerData"
                                border style="width:100%;" 
                                :header-cell-style="{background:'#E6A23C',color:'#fff'}"> 
                                <el-table-column type="index"></el-table-column>
                                <el-table-column prop="response" label="回答内容" align="center"></el-table-column>
                            </el-table>
                        </div>                            
                    </div>
                </el-card> -->
                <!-- <el-card v-else style="width:784px;margin: 0 auto;"> -->
                <el-card  style="width:784px;margin: 0 auto;" v-if="item.type!=3">
                    <div style="width:700px;margin:0 auto;font-size:20px;color:#E6A23C;">{{index+1}}、{{item.questionName}}</div>
                    <div :id="'charts'+item.id" class="demo1 boder">
                        <!--chart标签就是画布元素，设置chart的宽和高可以改变画布大小-->
                        <!--options绑定的数据实际配置项，对应echarts实例中的option后面的对象-->
                        <chart :options="item.option" style="margin:0 auto;"></chart> 
                        <!-- <chart :optionData="item.option" style="margin:0 auto;"></chart>  -->
                    </div>
                </el-card>
            </div>

        </div>

        <!-- <div v-if="num===0">
            <el-card style="height:200px;width:784px;margin:0 auto;margin-top:50px;text-align:center;line-height:150px">
                <h2>暂无问卷回答数据</h2>
            </el-card>
        </div> -->

    </div>
</template>


<script>
import axios from 'axios'
export default {
    data(){
        return {
            uid: this.$route.query.id,
            sid: this.$route.query.sid,
            stitle:sessionStorage.getItem('stitle'),            
            res:[],
            num:'',
            total: 0, //表格数据的总条数
            pageSize: 3 , // 每页显示的数据大小
        }
    },
    methods: {
         getTitle(){
            const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id,
                url:'/questionnaire/?id='+this.$route.query.id
            }).then(function(resp){
                _this.stitle=resp.data.data[0].questionTitle
                sessionStorage.setItem('stitle',resp.data.data[0].questionTitle)
            })
        },
    },
    created(){
        this.getTitle()
    },
    mounted:function(){
        const _this=this
        //获取回答数据，res[],num,stitle
        axios({
            url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
            method:'get',
        }).then(function(resp){
            console.log('444'+resp)
            const data1=JSON.stringify(resp.data.data)
            console.log('333'+typeof(data1))
            const jsonObj =JSON.parse(data1)
            var arr=[];
            for(let i in jsonObj){
                arr.push(jsonObj[i])
            }
            console.log('222'+typeof(arr))
            console.log('111'+data1)
           /**
            * {
                "id": 26, 
                "optionData": [
        {
            "count": 4, 
            "id": 12, 
            "optionName": "可以", 
            "questionId": 26
        }, 
        {
            "count": 0, 
            "id": 13, 
            "optionName": "不可以", 
            "questionId": 26
        }
    ], 
    "order": 2, 
    "questionName": "做软件测试可以嘛？", 
    "questionnaireId": 6, 
    "required": 2, 
    "type": 1
}

            * 
            * 
            * 
            */
           
                  arr.forEach(element => {
                        //console.log('555'+element)


                            //单选题，饼状图
                           if(element.type!==3){
                               var legend1=[];
                                console.log(typeof(legend1))

                            //    var series=[];
                               const ser=[]
                                for(let i=0;i<element.optionData.length;i++){
                                    ser[i]={"name":element.optionData[i].optionName,"value":element.optionData[i].count}
                                   //  legend1.push(element.optionData[i].optionName)
                                   legend1=element.optionData[i].optionName
                                    // series.push(element.optionData[i].count)
                                }
                                console.log(typeof(legend1))
                                console.log('777'+legend1)
                                console.log('7777'+JSON.stringify(ser))
                                console.log('555'+JSON.stringify(element))

                        //  const series1=[{"name": element.optionData.optionName,"value": element.optionData.count}]

                            element.option = JSON.parse(JSON.stringify(
                                   {
                                        title : {
                                        x:'center',//x轴方向对齐方式
                                        },
                                         tooltip : {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: '70%',
                                        y: 'top',
                                        data:_this.legend1
                                    },
                                    series : [
                                        {
                                            name: '访问来源',
                                            type: 'pie',
                                            radius: '37%',  //图的大小
                                            center: ['35%', '35%'], //图的位置，距离左跟上的位置
                                            data:JSON.stringify(ser),
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ],

                                   }))
                              }         
                              }
                            //   myChart.setOption(option);
                    )
                    _this.res = arr
                    console.log('200'+_this.res)

    }
        )
}
//    mounted:function() {
//             //获取回答数据，res[],num,stitle
//             this.axios.post("api/getResponse",{sid:this.sid})
//             .then(res => {
//                 if (res.status===200) {
//                     var data = JSON.parse(JSON.stringify(res.data.res));
//                     this.num = res.data.num;
//                     this.stitle = res.data.stitle;
//                     document.title = "分析—"+this.stitle;
//                     console.log(this.res)
//                     data.forEach(element => {
//                         if (element.type===1) {
//                             //单选题，饼状图
//                             element.option = JSON.parse(JSON.stringify({
//                                     title : {
//                                         x:'center',//x轴方向对齐方式
//                                     },
//                                     tooltip : {
//                                         trigger: 'item',
//                                         formatter: "{a} <br/>{b} : {c} ({d}%)"
//                                     },
//                                     legend: {
//                                         orient: 'vertical',
//                                         left: '70%',
//                                         y: 'top',
//                                         data:element.legend
//                                     },
//                                     series : [
//                                         {
//                                             name: '访问来源',
//                                             type: 'pie',
//                                             radius: '37%',  //图的大小
//                                             center: ['35%', '35%'], //图的位置，距离左跟上的位置
//                                             data:element.series,
//                                             itemStyle: {
//                                                 emphasis: {
//                                                     shadowBlur: 10,
//                                                     shadowOffsetX: 0,
//                                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
//                                                 }
//                                             }
//                                         }
//                                     ]
//                             }));
//                         }else if(element.type===2){
//                             //多选题，柱状图
//                             element.option = JSON.parse(JSON.stringify({
//                                     color: ['#3398DB'],
//                                     tooltip: {
//                                         trigger: 'axis',
//                                         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
//                                             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//                                         }
//                                     },
//                                     grid: {
//                                         x:1,
//                                         y:40,
//                                         width:580,
//                                         height:200,
//                                         containLabel: true
//                                     },
//                                     xAxis: [
//                                         {
//                                             type: 'category',
//                                             data: element.legend,
//                                             axisTick: {
//                                                 alignWithLabel: true
//                                             }
//                                         }
//                                     ],
//                                     yAxis: [
//                                         {
//                                             type: 'value'
//                                         }
//                                     ],
//                                     series: [
//                                         {
//                                             type: 'bar',
//                                             barWidth: '30%',
//                                             data: element.series
//                                         }
//                                     ]
//                             }));
//                         }
//                     });
//                     this.res = data;
//                     console.log(this.res)
//                 }
//             })
//             .catch(err => {
//                 console.error(err); 
//             })
//     }

}
</script>
<style scoped>
       body,html{
        background-color: rgb(245, 245, 245);
    }
    .full {
        width: 100%;
        height: 100%;
    }
    .title{
        margin: 0 auto;
        margin-bottom: 30px;
        width: 790px;

        color: #E6A23C;
        text-align: center;
    }
    .title > h1{
        font-size: 28px;
    }
    .temp{
        width: 100%;
        height: 35px;        
    }
    .temp1{
        width: 100%;
        height: 25px;        
    }
    .temp2{
        width: 100%;
        height: 10px;        
    }
    .border{
        border: 1px solid red;
    }
    .demo {
        /* position: relative; */
        margin-left: 100px;
        width: 550px;
        height: 250px;
    }
    .demo1 {
        /* position: relative; */
        /* padding-left: 70px; */
        width: 100%;
        height: 250px;
    }
</style>